<template>
  <div class="ControlTree-container" :style="{ width: containerWidth }">
    <div class="header-wrapper">
      <a-icon v-if="showBack" class="base-btn header-child" type="left" @click="handleBack" />
      <div class="header-title ml12 header-child">
        <span>{{ modelTitle }}</span>
      </div>
    </div>
    <div class="card-container">
      <div class="card-tip" v-show="!visibleState.isFold">
        <span v-show="(floors && (!floors.children || (floors.children && !floors.children.length))) || loading" class="loading-tips">模型属性数据请求中，请稍等...</span>
      </div>
      <a-tabs v-show="!loading" class="card-tab" default-active-key="floors">
        <a-tab-pane key="floors" tab="楼层">
          <a-tree 
            v-model="floorsCheckedKeys" 
            checkable
            :disabled="!checkableFloor"
            :tree-data="(floors && floors.children) || []" 
            :replace-fields="{ title: 'name', key: 'id' }"
            @select="onSelect"
            @check="onCheck"
          />
        </a-tab-pane>
        <a-tab-pane key="domains" tab="构件">
          <div :style="[{ height: '400px', overflow: 'auto' }]">
            <a-tree
              v-model="domainsCheckedKeys"
              :checkable="checkableDomains"
              :tree-data="(domains && domains.children) || []"
              :replace-fields="{ title: 'name', key: 'id' }"
              @select="onSelect"
              @check="onCheck2"
              @rightClick="handleRightclick"
            />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 操作弹窗 -->
    <base-modal v-if="visible.operate" title="操作" :width="500" @ok="handleAddModel" @cancel="visible.operate = false">
      <span>{{ `是否添加该模型构件(${childInitData.name})？` }}</span>
    </base-modal>
    <!-- 折叠按钮 -->
    <!-- <div class="fold-icon-wrapper base-btn" @click="handleFold">
      <a-icon v-if="visibleState.isFold" type="menu-unfold" />
      <a-icon v-else type="menu-fold" />
    </div> -->
    <div
      class="fold-icon-wrapper base-btn"
      :style="{
        ...retractStyle
      }"
      @click="handleFold"
    >
      <!-- transform: !visibleState.isFold ? 'translateY(-50%)' : 'translateY(-50%) rotate(180deg)' -->
      <a-icon v-if="visibleState.isFold" type="caret-right" />
      <a-icon v-else type="caret-left" />
    </div>
  </div>
</template>

<script>
import BaseModal from '@/components/BaseModal'
export default {
  components: {
    BaseModal
  },
  props: {
    floors: {},
    domains: {},
    selectedFloors: {},
    selectedDomains: {},
    allowAddTreeNode: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    modelTitle: {
      type: String,
      default: ''
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      default: true
    },
    // 构件树是否可选择
    checkableFloor: {
      type: Boolean,
      default: true
    },
    // 构件树是否可选择
    checkableDomains: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      retractStyle: {
        cursor: 'pointer',
        background: `url("") center center no-repeat`
      },
      containerWidth: '450px',
      visibleState: {
        isFold: false
      },
      childInitData: {},
      visible: {
        operate: false
      },
      state: {
        checkedKeys: [],
        selectedKeys: []
      },
      domainsCheckedKeys: [],
      floorsCheckedKeys: []
    }
  },
  watch: {
    selectedFloors: {
      handler(val) {
        this.floorsCheckedKeys = val
      }
    },
    selectedDomains: {
      handler(val) {
        this.domainsCheckedKeys = val
      }
    }
  },
  methods: {
    handleFold() {
      this.visibleState.isFold = !this.visibleState.isFold
      this.containerWidth = this.visibleState.isFold ? 0 : '450px'
    },
    // 添加模型
    handleAddModel() {
      this.$emit('add:model', this.childInitData)
      this.visible.operate = false
    },
    // 响应右键点击
    handleRightclick({ node }) {
      console.log('在模型上选择结构')
      const { id, name, state, children } = node.dataRef
      // 只有最后一级的构件可添加
      if (!this.allowAddTreeNode || (children && children.length)) return
      this.childInitData = {
        id,
        name,
        state
      }
      this.visible.operate = true
    },
    handleBack() {
      this.$close()
    },
    findSelected(data) {
      return (data || []).map((item) => {
        return item.id
      })
    },
    onCheck(checkedKeys, { checked, checkedNodes, node }) {
      console.log(checkedKeys, checked, checkedNodes, node)
      let record = node.dataRef
      if (record) {
        this.$emit('showCurSelectTreeNode', record, 1)
      }
    },
    onCheck2(checkedKeys, { checked, checkedNodes, node }) {
      console.log(checkedKeys, checked, checkedNodes, node)
      let record = node.dataRef
      if (record) {
        this.$emit('showCurSelectTreeNode', record, 2)
      }
    },
    onSelect(selectedKeys, { checked, checkedNodes, node }) {
      let record = node.dataRef
      console.log('结构节点', node)
      console.log('选中构件', selectedKeys)
      console.log(record.id, '构件id')
      if (selectedKeys && selectedKeys.length && record && record.id) {
        this.$emit('highlightTreeNode', record.id)
      } else {
        this.$emit('unHighlightTreeNode')
      }
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .ant-tabs-content {
  height: 100%;
  @{deep} .ant-tabs-tabpane {
    overflow: auto;
    height: 100%;
  }
}
.header-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgb(215, 215, 215);
  font-size: 18px;
  box-sizing: content-box;
  overflow: hidden;
  .header-child {
    margin: 10px;
  }
}
.ControlTree-container {
  border: 2px solid rgba(245, 245, 245, 1);
  background: #fff;
  z-index: 99;
  border-radius: 4px;
  position: relative;
  transition: width 0.5s ease-in-out;
}
.fold-icon-wrapper {
  width: 10px;
  height: 58px;
  position: absolute;
  top: 35%;
  right: -10px;
  z-index: 900;
  transform: translateY(-50%);
  transition: 0.3s ease;
  font-size: 16px;
  overflow: hidden;
  .anticon {
    background-color: #f7f7f7;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: -3px;
    font-size: 14px;
  }
}
.card-container {
  height: calc(100% - 50px);
  overflow-y: auto;
  .card-tip {
    position: absolute;
    top: 120px;
    left: 25px;
    .loading-tips {
      font-size: 14px;
    }
  }
}
</style>